<template>
	<view class="main">
		<view class="content" :domId="domId" id="html2canvas" ref="html2canvas">
			<image class="pic" :src="goods.thumb" mode="aspectFill"></image>
			<view class="cont">
				<view class="left">
					<view class="item">
						<text>藏品名称：</text>
						<text>{{goods.title}}</text>
					</view>
					<view class="item">
						<text>创作者：</text>
						<text>{{goods.user_name}}</text>
					</view>
					<view class="item">
						<text>售价：</text>
						<text>¥{{goods.price}}</text>
					</view>
				</view>
				<view class="right">
					<div class="qrcode" ref="qrCodeUrl"></div>
				</view>
			</view>
		</view>
		<u-popup :show="show" closeable @close="close">
			<view class="img">
				<block v-if="imgUrl">
					<image 
					:src="imgUrl" 
					:style="{width:imgWidth+'px',height: imgHeight+'px'}" mode="aspectFill"></image>
					<view class="tips">长按图片保存到相册</view>
				</block>
				<u-loading-page :loading="!imgUrl" loading-text="正在生成图片"></u-loading-page>
			</view>
			
		</u-popup>
	</view>
	
</template>


<script>
	export default {
		name:"html2canvas",
		props:{
			domId:'',
			show:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			goods:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				imgUrl:'',
				imgHeight:100,
				imgWidth:100,
			};
		},
		mounted() {
			
		},
		watch:{
			
		},
		methods:{
			close(){
				this.$emit('close',false)
			},

			
		},
		
	}
	
</script>
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	props:{
		domId:''
	},
	data(){
		return{
			imgUrl:''
		}
	},
    methods: {
        toImage () {
        	let imgHeight = document.querySelector('#html2canvas').offsetHeight // 获取DOM高度
        	let imgWidth = document.querySelector('#html2canvas').offsetWidth // 获取DOM宽度
        	html2canvas(document.querySelector('#html2canvas'), {
        		width: imgWidth,
        		height:imgHeight,
        		backgroundColor: null,
        		useCORS: true // 解决文件跨域问题
        	}).then(canvas => {
        		const url = canvas.toDataURL('image/png') // 生成的图片
        		// 可以上传后端或者直接显示
        		console.log('[生成图片-------------]',url)
        	})   
        },
		async create(domId) {
			console.log('执行',domId)
		            try {
		                const timeout = setTimeout(async ()=> {
		                    const shareContent = document.querySelector('#html2canvas');
		                    const canvas = await html2canvas(shareContent,{
		                        width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
		                        height: shareContent.offsetHeight,//防止白边
		                        logging: true,
		                        useCORS: true
		                    });
		                    const base64 = canvas.toDataURL('image/jpeg', 1);
							// console.log('[生成图片-------------]',base64)
		                    this.$ownerInstance.callMethod('renderFinish', base64);
		                    clearTimeout(timeout);
		                }, 500);
		            } catch(error){
		                console.log("错误",error)
		            }
		        }
    }
}
</script>
<style lang="scss" scoped>
	.main{
		position: fixed;
		left: 0vw;
		top: 50%;
		padding: 0 90rpx;		
		transform: translate(-50%,-50%);
		left: 50%;
		.content{
			.pic{
				width: 572rpx;
				height: 522rpx;
			}
			.cont{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					text{
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						&:nth-child(1){
							color: #A0A0A0;
						}
					}
				}
				.right{
					.qrcode{
					    display: inline-block;
					    ::v-deep img {
					        width: 176rpx;
					        height: 176rpx;
					        background-color: #fff; //设置白色背景色
					        padding: 6rpx; // 利用padding的特性，挤出白边
					        box-sizing: border-box;
					    }
					}
				}
			}
		}
		.img{
			padding: 90rpx;
			min-height: 100vh;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.tips{
			font-size: 32rpx;
			font-weight: 400;
			color: #B9B9B9;
			line-height: 48rpx;
			margin-top: 44rpx;
		}
		::v-deep .u-popup__content {
			background-color:rgba(0,0,0,0.3)!important
		}
	}
</style>
